<template>
  <!-- 排行榜 -->
  <div id="rankingList">
    <van-nav-bar style="background: #f5f5f5"
                 @click-left="$router.go(-1)">
      <template #left>
        <van-icon style="transform: rotate(90deg)"
                  size="18"
                  name="down"
                  color="#000" />
        <span style="padding-left: 10px; font-size: 16px">排行榜</span>
      </template>
    </van-nav-bar>

    <main class="content">
      <h3>官方榜</h3>
      <div class="official">
        <van-card style="background: #fff"
                  v-for="(item, index) in officialData"
                  :key="index"
                  :thumb="item.coverImgUrl"
                  @click="handleClick(item)">
          <template #tags>
            <van-cell :border="false"
                      v-for="(cItem, idx) in item.tracks"
                      :key="idx"
                      :title="cItem.first + '  -  ' + cItem.second.slice(0, 8) + '...'" />
          </template>
        </van-card>
      </div>

      <div class="selection">
        <h3>精选榜</h3>
        <van-image style="border-radius: 10px"
                   v-for="(item, index) in selectionData"
                   :key="index"
                   width="80"
                   height="80"
                   :src="item.coverImgUrl">
          <span class="van-ellipsis">{{ item.name }}</span>
        </van-image>
      </div>

      <div class="genre">
        <h3>曲风榜</h3>
      </div>
    </main>
    <Loading :loadingShow="loadingShow" />
  </div>
</template>

<script>
import Navbar from '@/components/navbar'
import Loading from '@/components/loading'
import { getToplist } from '@/api/rankingList'
export default {
  name: 'rankingList',
  data() {
    return {
      officialData: [], // 官方榜
      selectionData: [], // 精选榜
      loadingShow: false,
    }
  },
  components: { Navbar, Loading },
  methods: {
    handleClick(row) {
      this.$router.push({
        path: `/rankingDtl`,
        query: {
          id: row.id,
        },
      })
    },
  },
  created() {
    this.loadingShow = true
    getToplist().then((res) => {
      this.officialData = res.list.slice(0, 4)
      res.list.forEach((item) => {
        if (item.name == '原创榜') {
          this.officialData.push(item)
        }

        if (item.name == '黑胶VIP爱听榜') {
          this.selectionData.push(item)
        }
        if (item.name == '云音乐达人榜') {
        }
        this.loadingShow = false
      })
    })
  },
}
</script>

<style scoped>
#rankingList {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  padding-bottom: 15px;
}
#rankingList [class*='van-hairline']::after {
  border: none;
}
.content {
  width: 92%;
  margin: 0 auto;
}
.van-cell {
  font-size: 13px;
  padding: 3px 5px;
}
.van-card {
  padding: 15px 16px;
  border-radius: 10px;
  margin: 15px 0;
}
.van-ellipsis {
  padding-top: 8px;
  font-size: 12px;
}
.selection,
.genre {
  background: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.selection h3,
.genre h3 {
  margin: 0 0 10px 0;
  padding-top: 10px;
}
</style>